<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">



<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
#box {
	background-color: #fff;
}

.line {
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
	margin-top: 20px;
}

.price {
	color: #999;
	font-family: Montserrat;
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
	margin: 30px 0 10px;
	min-height: 30px;
}

ul,ol {
	margin: 0;
}

ul,ol {
	list-style: none outside none;
	padding: 0;
}

ul,ol {
	margin-bottom: 10px;
	margin-top: 0;
}

.strike {
	text-decoration: line-through;
}

.price strong {
	color: #555;
	font-size: 18px;
	font-weight: 400;
}

#smallChairs {
	
}
</style>


<script type="text/javascript">
	$(document).ready(function() {
		$('#tabs').tab();
	});
</script>

<title>Tesco | Check Out</title>
</head>
<body>

	<%
		String id = request.getParameter("id");
		System.out.println("=================" + id);

		String chairName = null;
		if ("001".equalsIgnoreCase(id)) {
			chairName = "chair";
		} else if ("11".equalsIgnoreCase(id)) {
			chairName = "chair1";
		} else if ("21".equalsIgnoreCase(id)) {
			chairName = "chair2";
		} else if ("31".equalsIgnoreCase(id)) {
			chairName = "chair4";
		}
	%>


	<div class="container">

		<%@include file="header.jsp"%>
		<br />

		<hr />

		<br />
		<div class="row" id="box">


			<div class="col-md-6">

				<div style="text-align: center;">
					<img src="assets/images/<%=id%>.png" width="200" height="200" />
				</div>


				<div class="row" id="smallChairs">
					<div class="col-md-2"></div>
					<div class="col-md-2">
						<img src="assets/elements/<%=chairName%>/001.png" width="90"
							height="90" />
					</div>
					<div class="col-md-2">
						<img src="assets/elements/<%=chairName%>/002.png" width="90"
							height="90" />
					</div>

					<div class="col-md-2">
						<img src="assets/elements/<%=chairName%>/003.png" width="90"
							height="90" />
					</div>

				</div>

			</div>

			<div class="col-md-6" id="box">

				<h1>
					Chair&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
						href="index.jsp" class="btn btn-primary">Search More</a>
				</h1>
				<div class="line"></div>
				<ul>
					<li>Barnd : Tesco</li>
					<li>Product Code : T123#</li>
					<li>Availability : In Stock</li>

				</ul>

				<div class="price">
					<b>Price</b> <span class="strike">$150.00</span> <strong>$125.00</strong>
				</div>


				<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
					<li class="active"><a href="#red" data-toggle="tab">Description</a></li>
					<li><a href="#orange" data-toggle="tab">Specification</a></li>
					<li><a href="#yellow" data-toggle="tab">Reviews</a></li>
					<li><a href="#white" data-toggle="tab">Share</a></li>

				</ul>
				<div id="my-tab-content" class="tab-content">
					<div class="tab-pane active" id="red">
						<h1>Description</h1>
						<p>Jemini polypropylene Stacking Chair. Tough moulded,
							textured seat with Black epoxy coated frame, manufactured to
							F.I.R.A. grade 4. Suitable for both indoor and outdoor use, fully
							stackable, ideal for schools, canteens etc.</p>
					</div>
					<div class="tab-pane" id="orange">
						<table class="table">
							<tbody>
								<tr>
									<th>Color</th>
									<th>Size</th>
									<th>Weight</th>
								</tr>
								<tr>
									<td>Blue</td>
									<td>XS</td>
									<td>5.00</td>
								</tr>
								<tr>
									<th>Composition</th>
									<th>Model</th>
									<th>Care</th>
								</tr>
								<tr>
									<td>NA</td>
									<td>NA</td>
									<td>NA</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="tab-pane" id="yellow">
						<p>
							There are no reviews yet, would you like to <a href="#review_btn">submit
								yours?</a>
						</p>
						<h3>Be the first to review Chair</h3>
						<form>
							<div class="form-group">
								<label> Name <span class="required">*</span>
								</label> <input type="text" placeholder="Name" class="form-control" />
							</div>
							<div class="form-group">


								<label> Email <span class="required">*</span>
								</label> <input type="text" placeholder="Email" class="form-control">
							</div>

							<div>
								<label class="rating">Rating</label> <img
									src="assets/images/stars-5.png" alt="rating">
							</div>

							<div class="form-group">
								<label> Your Review <span class="required">*</span>
								</label>
								<textarea rows="3" class="form-control"></textarea>
							</div>
						</form>
						<p id="review_btn">
							<button class="btn btn-primary" type="button">Submit
								Review</button>
						</p>
					</div>
					<div class="tab-pane" id="white">

						<h3>Share this Purchase with your Friends !</h3>
						<form>

							<div class="form-group">


								<label>Email<span class="required">*</span>
								</label> <input type="text" placeholder="Email" class="form-control">
							</div>



							<div class="form-group">
								<label> Your Comments <span class="required">*</span>
								</label>
								<textarea rows="3" class="form-control"></textarea>
							</div>
						</form>
						<p id="review_btn">
							<button class="btn btn-primary" type="button">Send</button>
						</p>
					</div>

				</div>


			</div>
		</div>
	</div>




	<script src="assets/js/jquery-1.7.2.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>